<!--学员奖励信息 新增-->
<template>
	<div>
        <div class="marginLeftRight">
            <div class="my-form-container" style="height:372px">
                <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm">
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">获奖名称</div>
                            <el-form-item  prop="rdname">
                                <div class="my-form-item-value">
                                    <el-input class="inputWidth" v-model="ruleForm.rdname"></el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">选择奖励学员</div>
                            <el-form-item  prop="studentId">
                                <div class="my-form-item-value chose-student">
                                <el-input class="inputWidth" v-model="ruleForm.studentName" disabled></el-input>
                                <img src="../../../../assets/assessment/icon-plan-record-detail.png" @click="choseDialog"> 
                                <img src="../../../../assets/assessment/icon-delete.png" @click="deleteInput"> 
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">奖励类别</div>
                            <el-form-item  prop="rdtype">
                                <div class="my-form-item-value">
                                    <el-select class="inputWidth" v-model="ruleForm.rdtype">
                                        <el-option v-for="item in typeList" :key="item.typeid" :label="item.typename" :value="item.typeid"></el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">奖励级别</div>
                            <el-form-item  prop="grade">
                                <div class="my-form-item-value">
                                    <el-select class="inputWidth" v-model="ruleForm.grade">
                                        <el-option v-for="item in gradeList" :key="item.gradeid" :label="item.gradename" :value="item.gradeid"></el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">奖励金额</div>
                            <el-form-item  prop="money">
                                <div class="my-form-item-value">
                                    <el-input class="inputWidth145" v-model="ruleForm.money"></el-input>&nbsp;&nbsp;(单位：元)
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">奖励文件号</div>
                            <el-form-item  prop="fileno">
                                <div class="my-form-item-value">
                                    <el-input class="inputWidth"  v-model="ruleForm.fileno"></el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">奖励单位</div>
                            <el-form-item  prop="company">
                                <div class="my-form-item-value">
                                    <el-input class="inputWidth" v-model="ruleForm.company"></el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">获奖日期</div>
                            <el-form-item  prop="rddate">
                                <div class="my-form-item-value">
                                    <el-date-picker class="time" v-model="ruleForm.rddate" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">获奖文件</div>
                            <el-form-item  prop="rdfile">
                                <div class="my-form-item-value">
                                    <el-input class="inputWidth" v-model="ruleForm.rdfile"></el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">发文日期</div>
                            <el-form-item  prop="senddate">
                                <div class="my-form-item-value">
                                    <el-date-picker class="time" v-model="ruleForm.senddate" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item" style="border:none;height: 70px;">
                        <el-col :span="12">
                            <div class="my-form-item-label">奖励原因</div>
                            <el-form-item  prop="reason">
                                <div class="my-form-item-value" style="line-height:65px">
                                    <el-input class="inputWidth" type="textarea" v-model="ruleForm.reason"></el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">附件</div>
                            <el-form-item  prop="enclosure">
                                <div class="my-form-item-value" style="line-height:72px">
                                    <el-upload
                                        action="string"
                                        :show-file-list="false"
                                        :http-request="upLoadApi"
                                        accept=".jpg,.png,.doc,.docx"
                                        :before-upload="beforeAvatarUpload">
                                        <span class="small-btn" type="primary">选择文件</span>
                                    </el-upload>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="button-group">
                <div class="" @click="save">保存</div>
                <div class="" @click="cancel">取消</div>
            </div>
        </div>
        <!-- 选择学员 -->
        <chose-student ref="choseDialog" @choseXY="getStudent"></chose-student>
	</div>
</template>

<script>
import {addRewardInfo} from "@/api/student";
import ChoseStudent from '@/components/choseStudent';
  import axios from 'axios'
  export default {
		data(){
		  return {
            typeList: [],
            gradeList:[],
            ruleForm:{
                company:'',	//颁奖单位
                enclosure:'',//	附件
                fileno:'',//奖励文件号
                grade:'',//奖励级别
                money:'',//奖励金额
                rddate:'',//获奖日期
                rdfile:'',//获奖文件
                rdname:'',//奖励名称
                rdtype:'',// 奖励类别
                reason:'',//奖励原因
                senddate:'',//发文日期
                studentId:'',
                studentName:'',
            },
            rules: {
                company: [{ required: true, message: '请填写颁奖单位', trigger: 'blur'}],
                fileno: [{ required: true, message: '请填写奖励文件号', trigger: 'blur'}],
                grade: [{ required: true, message: '请选择奖励级别', trigger: 'change'}],
                money: [{ required: true, message: '请填写奖励金额', trigger: 'blur'}],
                rddate: [{ required: true, message: '请选择获奖日期', trigger: 'change'}],
                rdfile: [{ required: true, message: '请填写获奖文件', trigger: 'blur'}],
                rdname: [{ required: true, message: '请填写奖励名称', trigger: 'blur'}],
                rdtype: [{ required: true, message: '请选择奖励类别', trigger: 'change'}],
                senddate: [{ required: true, message: '请选择发文日期', trigger: 'change'}],
                studentId:[{ required: true, message: '请选择奖励学员', trigger: 'change'}]
            }
          }
		},
        components: {
            ChoseStudent
        },
        mounted(){
            //奖励类别
            this.commonApi.getRewardTypeList().then(res=>{
                this.typeList = res.records
            })
            //奖励级别
            this.commonApi.getGradeList().then(res=>{
                this.gradeList = res.records
            })
        },
        methods: {
            deleteInput(){
                this.ruleForm.studentName = '';
                this.ruleForm.studentId = ''
            },
            getStudent(e){
                this.ruleForm.studentId = e.id;
                this.ruleForm.studentName = e.studentName
            },
            //选择学员
            choseDialog(){
                this.$refs.choseDialog.dialogVisible = true
            },
            upLoadApi(item){
                let formData = new FormData();
                formData.append('file', item.file);
                let requestUrl = this.$store.state.studentUrl.baseUrl+'/file/upload'
                axios.post(requestUrl,formData).then(res => {
                    if(res.data.success){
                        this.ruleForm.enclosure = res.data.data.fileUri
                        this.$message.success('上传成功！')
                    }
                })
            },
            beforeAvatarUpload(item){
                if(item.name.indexOf("doc") == -1 && item.name.indexOf("docx") == -1&& item.name.indexOf("jpg") == -1 && item.name.indexOf("png") == -1){
                    this.$message.error('请上传图片或word');
                }
            },
            //保存数据
            save(){
                this.$refs['ruleForm'].validate(async (valid) => {
                    if (valid) {
                        let res = await addRewardInfo(this.ruleForm);
                        if(res.code == 200){
                            this.$message({message: '新增成功',type: 'success'});
                            this.$router.push({
                                path:'/student/disciplinaryInfo/reward/list'
                            })
                        }else{
                            this.$message.error(res.msg);
                        }
                    } 
                });
            },
            //取消
            cancel(){
                this.$router.push({
                    path:'/student/disciplinaryInfo/reward/list'
                })
            }
        }
  };
</script>
<style scoped lang="less" scoped>
@import "../../../../styles/commonCss.less";
/deep/.el-textarea__inner {
      resize: none;
      font-size: 16px;
      color: rgba(0, 76, 167, 1);
    }
    /deep/.demo-ruleForm{
        .el-form-item{
            margin-bottom: 0!important;
            width: 100%;
        }
        .el-form-item__error {
            top: 75%;
            left: 42px;
        }
    }
    /deep/.my-form-item-label{justify-content: center;padding: 0!important;}
	.inputWidth{width: 158px;}
    .inputWidth145{width: 145px;}
    
    .small-btn{
        display: flex;
        align-items: center;
        padding: 5px 19px;
        opacity: 1;
        border-radius: 6px;
        background: #EFEBFF;
        border: 1px solid #5230E9;
        color: #5230E9 ;
        font-size: 14px;
        width: 96px;
        height: 27px;
        cursor: pointer;
    }
</style>